<template>
    <div class="TransferAccount">
        <div class="container f-column f-j-around f-a-center">
            <input class="account" type="text" placeholder="请输入对方账户"/>
            <div class="accountInfo f-row f-j-center f-a-center">
                <img src="../../assets/logo.png" alt="">
                <span>昵称</span>
            </div>
        </div>
        <div class="container f-column f-j-around f-a-end">
            <input class="amount" type="text" placeholder="请输入转账个数（10个起整数）">
            <span class="message">转账手续费 <span class="DIN-Medium">2.00%</span> ADS</span>
        </div>
        <div class="container f-row f-j-center f-a-center">
            <div class="submitButton" @click="isShowPayType = true">确定</div>
        </div>
        <yd-actionsheet :items="payTypes" v-model="isShowPayType" cancel="取消"></yd-actionsheet>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO, SHOW_PAY_PASSWORD_DIALOG} from "@/store/MutationTypes";
// @ts-ignore
import {ActionSheet} from 'vue-ydui/dist/lib.rem/actionsheet';
@Component({
    name: 'TransferAccount',
    components: {ActionSheet}
})
export default class extends Vue {
    private isShowPayType: boolean = false;
    private get payTypes(): any[] {
        let __this = this;
        return [
            {label: '仓储账户支付', callback: () => {
                    __this.$store.dispatch(SHOW_PAY_PASSWORD_DIALOG, (r: any) => {
                        __this.$common.toast({
                            mes: '仓储账户支付 ' + r
                        });
                        __this.$store.dispatch(SHOW_PAY_PASSWORD_DIALOG, undefined);
                    })
                }},
            {label: '收益账户支付', callback: () => {
                    __this.$store.dispatch(SHOW_PAY_PASSWORD_DIALOG, (r: any) => {
                        __this.$common.toast({
                            mes: '收益账户支付 ' + r
                        })
                        __this.$store.dispatch(SHOW_PAY_PASSWORD_DIALOG, undefined);
                    })
                }}
        ];
    }
    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {name: '首页', click: () => {
                __this.$router.push('/home');
                }}
        })
    }
}
</script>

<style scoped lang="less">
.TransferAccount {
    padding: 0.2rem 0.3rem;
    & .container {
        background-color: white;
        border-radius: 0.1rem;
        padding: 0.2rem;
        margin-bottom: 0.2rem;
        & .account {
            text-align: center;
            width: 6.3rem;
            padding: 0.2rem 0.2rem 0.1rem 0.2rem;
            background-color: white;
            font-size: 0.3rem;
            margin-top: 0.2rem;
            margin-bottom: 0.2rem;
        }
    }
    & .accountInfo {
        & img {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 0.5rem;
            margin-right: 0.3rem;
        }
        & span {
            font-size: 0.24rem;
            color: #999999;
        }
        margin-bottom: 0.3rem;
    }
    & .amount {
        background-color: #FAFAF7;
        font-size: 0.3rem;
        text-align: center;
        width: 6.3rem;
        padding: 0.3rem;
        border: none;
        margin-bottom: 0.2rem;
    }
    & .message {
        color: #999999;
        font-size: 0.24rem;
        margin-bottom: 0.2rem;
    }
}
</style>
